<template>
  <div>
    <el-dialog
      width="90%"
      top="5vh"
      title="User Battery Swap Details"
      :visible.sync="show"
    >
      <r-search
        ref="search"
        :searchData="searchData"
        :searchForm="searchForm"
        :searchHandle="searchHandle"
        :inline="true"
      />
      <r-table
        :isPagination="true"
        :isHandle="true"
        :tableData="tableData"
        :tableCols="tableCols"
        :tablePage="pagination"
        :loading="tableLoading"
        :tableHandles="tableHandles"
        :isSelection="false"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Abnormal_record",
  data() {
    return {
      searchData: {
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 230,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 220,
          change: val => {
            this.searchData.endTime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        }
      ],

      show: false,
      row: {},
      tableLoading: false,
      tableData: [],
      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 },
      tableCols: [
        { label: "Device Number", prop: "deviceNo" },
        { label: "Package", prop: "mealName" },
        { label: "Return Battery Number", prop: "oldBatteryNo" },
        {
          label: "Return Door Number",
          prop: "oldCabinetNo",
          formatter: e => (e.oldCabinetNo ? e.oldCabinetNo : "--")
        },
        { label: "Rent Battery Number", prop: "newBatteryNo" },
        {
          label: "Rent Door Number",
          prop: "newCabinetNo",
          formatter: e => (e.newCabinetNo ? e.newCabinetNo : "--")
        },
        {
          label: "Battery Status",
          prop: "btStatus",
          formatter: e =>
            e.btStatus == 0
              ? "Rent"
              : e.btStatus == 1
              ? "Already Return"
              : e.btStatus == 2
              ? "Not Returned"
              : "--",
          itemClass: e =>
            e.btStatus == 2 ? "danger" : e.btStatus == 1 ? "success" : ""
        },
        {
          label: "Order Type ",
          prop: "openType",
          formatter: e =>
            e.openType == 1
              ? "Rent Battery"
              : e.openType == 2
              ? "Battery Swaps"
              : "--"
          // itemClass: e => (e.openType == 2? 'danger' :e.openType == 1 ? 'success' : ''),
        },
        {
          label: "Return Battery Electric Quantity",
          prop: "returnElectric",
          formatter: e => (e.returnElectric ? e.returnElectric + "%" : "--")
        },
        {
          label: "Rent Battery Electric Quantity",
          prop: "electric",
          formatter: e => (e.electric ? e.electric + "%" : "--")
        },
        { label: "Order Time", prop: "ctime" }
      ]
    };
  },
  watch: {
    "pagination.offset": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    },
    "pagination.limit": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    }
  },
  mounted() {},
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        userId: this.row.userId || "",
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      };
      let res = await this.apis.centerUserExchangeList(parm);
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    show_fun(row) {
      // console.log(222, row);
      this.row = row;
      this.show = true;
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
